<template>
    <div class="vmall-order-confirm">
        <div class="container">
            <div class="borderradius address flex justify-start items-center mb-24 px-32 py-24 bg-white"
                v-if="address.shopName" @click="onCheckAddress(1)">
                <div class="flex1">
                    <div class="flex f-28-B">
                        <text class="mr-28">{{ address.shopName }}</text>
                    </div>
                    <text class="mt-12 f-24 ellipsis-2 rgba(0, 0, 0, 0.6)">{{ address.provinceCityArea }}</text>
                    <div class="flex color-999">
                        <text class="mr-24 f-24">{{ address.name }}</text>
                        <text class="f-24">{{ address.phone }}</text>
                    </div>
                </div>
                <up-icon class="ml-20" name="arrow-right" size="16" color="#333333" />
            </div>
            <div class="noaddress borderradius address flex justify-start items-center my-24 px-32 py-20 bg-white" v-else
                @click="onCheckAddress(2)">
                <div>
                    <div>{{ shopName }}</div>
                    <div class="flex1" style="color: rgba(0, 0, 0, 0.6);">请选择地址</div>
                </div>
                <up-icon class="ml-20" name="arrow-right" size="16" color="#333333" />
            </div>
            <view v-for="(item, index) in orderInfo.orderproduct" :key="index"
                class="order-item borderradius my-24 px-32 py-24 bg-white">
                <view class="order-itemscon" @click="goToDetail(item)">
                    <image class="cover mr-28" :src="item.productImg" />
                    <view class="flex column flex1 py-24">
                        <view class="cart-title flex justify-start items-center">
                            <view class="tit">{{ item.name }}</view>
                        </view>
                        <view class="flex justify-between">
                            <text class="price1 f-32-B">￥{{ item.unitPrice }}</text>
                        </view>
                    </view>
                    <div class="order-count">
                        共{{item.count}}件
                    </div>
                </view>
                <div class="borderbottom">
                    <view v-for="(items,nindex) in item.skuList" :key="nindex" class="cart-box mb-24">
                        <div class="cart-title1 f-24 ellipsis-2">{{ items.skuSpec }}</div>
                        <div class="cart-count flex justify-between items-center mt-10">
                            {{ items.quantity}}
                        </div>
                    </view>
                </div>
            </view>
            <div class="order-price mt-20 px-32 py-32 bg-white">
                <div class="borderradius flex justify-between">
                    <view class="f-24">商品吊牌总价</view>
                    <view class="price f-24">￥{{ orderInfo.price }}</view>
                </div>
                <div class="totalprice">
                    合计:<text class="f-32-B color5">{{ orderInfo.price }}</text>
                </div>
                <div class="totalpricetips">
                    实际进货金额请联系客服
                </div>
            </div>
            <div class="borderradius flex justify-between mt-20 px-32 py-32 bg-white">
                <view class="f-28">订单备注</view>
                <view class="price f-32-B">
                    <up-input placeholder="请输入备注" :border="'none'" v-model="remark"></up-input>
                </view>
            </div>

        </div>
        <div class="submit px-32 flex justify-between items-center">
            <div class="flex justify-start items-center order-bottom">
                <view class="f-24">共:</view>
                <view class="f-28-B">{{ orderInfo.nums }}</view>
                <view class="f-24">件,</view>
                <view class="f-24">总计:</view>
                <view class="price f-28-B">￥{{ orderInfo.price }}</view>
            </div>
            <div v-if="role==2" class="pay-btn tc f-32" @click="onCreateOrder" :disabled="loading">
                <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
                提交订单
            </div>
        </div>
        <view v-if="!AccountStatus" class="w100 submitTips">
			<view class="w100 mt-90 flex justify-center items-center flex-wrap">
				<view class="w100 mt-20 flex justify-center items-center"><image class="logo" :src="IMG_URL2 + 'common/check-circle.svg'" /></view>
				<view class="mt-20 f-24 white titinfo">订单提交成功，系统审核中</view>
			</view>
			<view class="complete-btn" @click="completeFun">完成</view>
		</view>

    </div>
</template>

<script setup>
import { getStorage } from "@/utils/storage";
import { IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
let role=ref(getStorage('role'))
const shopName = ref(getStorage('shopName'))
let AccountStatus = ref(true);
const loading = ref(false);

// 地址id
const address = ref({
    shopReceiveId: "",
    provinceCityArea: "",
    mobile: ""
});

let remark = ref('')
let shopReceiveId = ref('')
const orderInfo = ref({
    type: "",
    price:0,
    nums:0,
    spec: {
        store_name: "",
        image: "",
        shop_name: "",
        name: "",
        price: "",
        nums:''
    },
    orderproduct: []
});
const completeFun = () => {
	uni.reLaunch({url: "/pages/order/index"});
}
onLoad((options) => {
    console.log(options.spec, 'options')
    orderInfo.value = {
        type: options.type,
        price:0,
        nums:0,
        orderproduct: []
    };
    if(options.spec){
        let spec = JSON.parse(options.spec);
        if (spec) {
            for (let i = 0; i < spec.length; i++) {
                spec[i].count=0
                for (let n = 0; n < spec[i].skuList.length; n++) {
                    if (spec[i].skuList[n].selected) {
                        spec[i].count=spec[i].count + 1;
                    }
                }
            }
            let sum = 0;
            let count = 0;
            for (let i = 0; i < spec.length; i++) {
                for (let n = 0; n < spec[i].skuList.length; n++) {
                    if (spec[i].skuList[n].selected) {
                        count = count + 1;
                        sum += spec[i].skuList[n].quantity * spec[i].unitPrice;
                    }
                }
            }
            orderInfo.value.orderproduct = spec;
            orderInfo.value.price = sum
            orderInfo.value.nums = count
        }
    }
    console.log(orderInfo.value, 'orderInfo.value')
    // 初始化获取默认收货地址
    getAddressDefault();
});

onShow(() => {
    // getAddressDefault()
    uni.$on("check-address", (data) => {
        address.value = {
            shopName: data.shopName,
            city: data.city,
            cityCode: data.cityCode,
            detailAddress: data.detailAddress,
            isDefault: data.isDefault,
            name: data.name,
            phone: data.phone,
            province: data.province,
            provinceCode: data.provinceCode,
            shopId: data.shopId,
            shopName: data.shopName,
            shopReceiveId: data.shopReceiveId,
            street: data.street,
            streetCode: data.streetCode,
            provinceCityArea: data.province + data.city + data.street + data.detailAddress,
        };
        shopReceiveId.value = data.shopReceiveId
    });
});

onUnload(() => {
    uni.$off("check-address");
});
const goToDetail = (item) => {
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
}
// 获取默认收货地址
const getAddressDefault = () => {
    shopApi.SHOPRECEIVEGGETDEFAULTADDRESS().then((res) => {
        if (res.code == 200) {
            const data = res.result;
            address.value = {
                shopName: data.shopName,
                city: data.city,
                cityCode: data.cityCode,
                detailAddress: data.detailAddress?data.detailAddress:'',
                isDefault: data.isDefault,
                name: data.name,
                phone: data.phone,
                province: data.province,
                provinceCode: data.provinceCode,
                shopId: data.shopId,
                shopName: data.shopName,
                shopReceiveId: data.shopReceiveId,
                street: data.street,
                streetCode: data.streetCode,
                provinceCityArea: data.province + data.city + data.street + data.detailAddress,
            };
            shopReceiveId.value = data.shopReceiveId
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "error",
            });
        }
    });
};

// 下单
const onCreateOrder = () => {
    // 校验收货地址
    if (shopReceiveId.value == "") {
        uni.showToast({
            title: "请选择收货地址",
            icon: "none",
            mask: true
        });
        return;
    }
    let newproductList=[]
    console.log(orderInfo.value.orderproduct,'orderInfo.value.orderproduct')
    for (let i = 0; i < orderInfo.value.orderproduct.length; i++) {
        for (let n = 0; n < orderInfo.value.orderproduct[i].skuList.length; n++) {
            if ( orderInfo.value.orderproduct[i].skuList[n].selected) {
                newproductList.push({
                    image:orderInfo.value.orderproduct[i].productImg,
                    name:orderInfo.value.orderproduct[i].name,
                    price:orderInfo.value.orderproduct[i].unitPrice,
                    productCode:orderInfo.value.orderproduct[i].productCode,
                    productId:orderInfo.value.orderproduct[i].productId,
                    productSkuCode:orderInfo.value.orderproduct[i].skuList[n].productSkuCode,
                    productSkuId:orderInfo.value.orderproduct[i].skuList[n].productSkuId,
                    quantity:orderInfo.value.orderproduct[i].skuList[n].quantity,
                    spec:orderInfo.value.orderproduct[i].skuList[n].skuSpec,
                    totalPrice:Number(orderInfo.value.orderproduct[i].skuList[n].quantity)*Number(orderInfo.value.orderproduct[i].unitPrice),
                })
            }
        }
    }
    let params ={
        remark:remark.value,
        shopReceiveId:shopReceiveId.value,
        productList:newproductList,
        orderAmount:orderInfo.value.price,
    }
    loading.value = true;

    shopApi.ORDERCREATEORDER(params).then((res) => {
        loading.value = false;
        if(res.code==200){
            uni.showToast({
                title: "下单成功",
                icon: "success",
            });
            AccountStatus.value=false
            // uni.navigateTo({ url: "/pagesA/order/success" });
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "error",
            });
        }
    })
};
// 选择收货地址
const onCheckAddress = (type) => {
    if(type==1){
        uni.navigateTo({ url: `/pages/user/address/index?type=cart&shopReceiveId=${shopReceiveId.value}` });
    }else{
        uni.navigateTo({ url: "/pages/user/address/index?type=cart" });
    }
    
};
</script>

<style lang="scss">
page {
    background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.vmall-order-confirm {
    .submitTips{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(255, 255, 255, 1);
        .submitTipsBox{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .complete-btn{
            background: rgba(253, 236, 219, 1);
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: center;
            color: rgba(145, 74, 0, 1);

            width: 319px;
            margin:90px auto 0px;
            padding: 12px 20px 12px 20px;
            box-sizing: border-box;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .color-999 {
        color:rgba(0, 0, 0, 0.6);
    }

    .container {
        padding-bottom: 150rpx;
        padding: 24rpx;
        box-sizing: border-box;
    }
    .noaddress{
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: rgba(0, 0, 0, 0.9);
    }

    .borderradius {
        border-radius: 10rpx;
    }
    .order-price{
        .price{
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.9);
        }
        .totalprice{
            width: 100%;
            font-size: 12px;
            font-weight: 600;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: flex-end;
            border-top: 1rpx solid rgba(0, 0, 0, 0.1);
            padding-top: 12rpx;
            margin-bottom: 12rpx;
            .color5{
                font-size: 14px;
                font-weight: 600;
                line-height: 22px;
                color: rgba(193, 122, 50, 1);
                margin-left: 8rpx;
                
            }
        }
        .totalpricetips{
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: rgba(0, 0, 0, 0.6);
        }
    }

    .tip-text {
        color: #909193;
        vertical-align: middle;
    }

    .price {
        color: rgba(214, 142, 68, 1);
    }

    .icon-img {
        width: 48rpx;
        height: 48rpx;
    }

    .inform-tip {
        line-height: 60rpx;
    }

    .inform-text {
        color: rgba(214, 142, 68, 1);
    }

    .submit {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 120rpx;
        background: #ffffff;
        box-sizing: border-box;
        .order-bottom{
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: rgba(0, 0, 0, 0.6);
        }
    }

    .pay-btn {
        width: 200rpx;
        height: 68rpx;
        line-height: 68rpx;
        background: rgba(214, 142, 68, 1);
        color: #ffffff;
        border-radius: 52rpx;
        display: flex;
        justify-content: center;
    }
    .order-item{
        
        .cover{
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
        }
        .order-itemscon{
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 12rpx;
            .cart-title{
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: rgba(0, 0, 0, 1);
            }
            .price1 {
                color: rgba(0, 0, 0, 1);
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;

            }
            .order-count{
                color: rgba(0, 0, 0, 0.6);
            }
        }
        .cart-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .borderbottom{
            border-bottom: 1rpx solid #e3e3e3;
        }
    }
    .order-item:last-child{
        .borderbottom{
            border-bottom:none;
        }
    }
}
</style>